<!DOCTYPE html>

<!--
Copyright 2017 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html lang="en">
<head>

<script>
//  philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build
window.ga = window.ga || function() {
  (ga.q = ga.q || []).push(arguments);
};
ga('create', 'UA-33848682-1', 'auto');
ga('set', 'transport', 'beacon');
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

<meta charset="utf-8">
<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
<meta name="author" content="//samdutton.com">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
<meta itemprop="image" content="/images/icons/icon192.png">
<meta id="theme-color" name="theme-color" content="#fff">

<link rel="icon" href="/images/icons/icon192.png">

<base target="_blank">


<title>CSS Regions</title>

<link rel="stylesheet" href="../css/main.css">

<style>
  article {
    -webkit-flow-into: myFlow;
    flow-into: myFlow;
  }

  article p{
    margin-top: 0;
  }

  .region {
    display: inline-block;
    -webkit-flow-from: myFlow;
    flow-from: myFlow;
    height: 300px;
  }

  #region1 {
    width: 30%;
  }

  #region2 {
    margin-left: 5%;
    width: 60%;
  }
</style>

</head>
<body>
<div id="container">

  <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> CSS Regions</h1>

  <p style="color: #444">If you don't see two blocks of text side-by-side, CSS regions are not supported. <br />Change the window size to see content flowing from one block to the other:</p>

  <article>
    <p>Displaying the complex layouts of a typical magazine, newspaper, or textbook on the web requires capabilities beyond those available in existing CSS modules. Dynamic magazine layout in particular requires flexibility in placement of boxes for content flows. This is the purpose of the CSS regions module.</p>
    <p>The <a href="https://www.w3.org/TR/css3-regions/">CSS regions module</a> allows content to flow across multiple areas called regions. The regions are not necessarily contiguous in the document order. The CSS regions module provides an advanced content flow mechanism, which can be combined with positioning schemes as defined by other CSS modules such as the Multi-Column Module or the Grid Layout Module to position the regions where content flows.</p>
  </article>

  <div class="region" id="region1"></div>
  <div class="region" id="region2"></div>

<a href="https://github.com/samdutton/simpl/blob/gh-pages/cssregions" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

</div>
</body>
</html>
